<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>充电控制面板</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="icon" href="image/favicon.ico" type="image/x-icon">
    <style>
        /* === 全局样式 === */
        :root {
            --primary-color: #4ecdc4;
            --primary-dark: #3aa9a1;
            --secondary-color: #5563de;
            --accent-color: #ff6b6b;
            --text-light: #ffffff;
            --text-medium: #e0e0e0;
            --text-dark: #0f3460;
            --bg-dark: #0f172a;
            --bg-medium: #1e293b;
            --bg-light: #334155;
            --card-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
            --card-hover: 0 15px 35px rgba(0, 0, 0, 0.4);
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: linear-gradient(135deg, #0f172a, #1e293b, #0f3460);
            color: var(--text-medium);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            line-height: 1.6;
        }
        
        /* === 容器样式 === */
        .container {
            flex: 1;
            max-width: 1400px;
            margin: 0 auto;
            padding: 30px 20px;
            width: 100%;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.8s ease forwards;
        }
        
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* === 顶部导航栏 === */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
            margin-bottom: 30px;
            background: rgba(255, 255, 255, 0.07);
            backdrop-filter: blur(12px);
            border-radius: 20px;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        .panel-title {
            font-size: 1.8rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 15px;
            color: var(--text-light);
            text-shadow: 0 0 15px rgba(78, 205, 196, 0.5);
        }
        
        .panel-title i {
            color: var(--primary-color);
            font-size: 1.8rem;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 20px rgba(78, 205, 196, 0.4);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        
        .user-avatar::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                transparent,
                rgba(255, 255, 255, 0.3),
                transparent
            );
            animation: rotate 6s linear infinite;
        }
        
        .user-avatar:hover {
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(78, 205, 196, 0.7);
        }
        
        .user-avatar i {
            color: white;
            font-size: 22px;
            z-index: 1;
        }
        
        .user-id {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-light);
        }
        
        /* === 欢迎与余额区域 === */
        .welcome-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            background: rgba(255, 255, 255, 0.07);
            backdrop-filter: blur(12px);
            border-radius: 20px;
            padding: 25px 30px;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        .welcome-section:hover {
            transform: translateY(-5px);
            box-shadow: var(--card-hover);
        }
        
        .welcome-text {
            font-size: 1.4rem;
            font-weight: 500;
            color: var(--text-light);
        }
        
        .welcome-text span {
            color: var(--primary-color);
            font-weight: 700;
            text-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
        }
        
        .balance-section {
            display: flex;
            align-items: center;
            gap: 25px;
        }
        
        .balance {
            font-size: 1.9rem;
            font-weight: 800;
            color: var(--accent-color);
            display: flex;
            align-items: center;
            gap: 12px;
            text-shadow: 0 0 15px rgba(255, 107, 107, 0.4);
        }
        
        .balance i {
            font-size: 1.7rem;
            color: var(--accent-color);
        }
        
        .recharge-btn {
            display: inline-flex;
            align-items: center;
            padding: 14px 28px;
            background: linear-gradient(45deg, var(--accent-color), var(--primary-color));
            color: white;
            border-radius: 30px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            border: none;
            gap: 10px;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .recharge-btn::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -60%;
            width: 20%;
            height: 200%;
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(25deg);
            transition: all 0.7s;
            z-index: -1;
        }
        
        .recharge-btn:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
        }
        
        .recharge-btn:hover::after {
            left: 120%;
        }
        
        /* === 设备统计区域 === */
        .device-stats {
            display: flex;
            justify-content: center; /* 居中显示 */
            align-items: center;
            margin-bottom: 30px;
            padding: 20px 30px;
            background: rgba(255, 255, 255, 0.07);
            backdrop-filter: blur(12px);
            border-radius: 20px;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        .device-stats:hover {
            transform: translateY(-5px);
            box-shadow: var(--card-hover);
        }
        
        .stats-label {
            font-size: 1.3rem;
            margin-right: 15px;
            font-weight: 500;
            color: var(--text-light);
        }
        
        .active-devices {
            font-size: 1.6rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--primary-color);
            text-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
        }
        
        .active-devices i {
            font-size: 1.8rem;
        }
        
        .refresh-btn {
            margin-left: 15px;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-light);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .refresh-btn:hover {
            background: var(--primary-color);
            transform: rotate(180deg);
        }
        
        /* === 充电设备区域 === */
        .charging-devices {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
            padding: 10px 5px 20px 0;
        }
        
        .device-card {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(12px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: var(--card-shadow);
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 280px;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* 卡片颜色主题 */
        .device-card.theme-blue {
            background: linear-gradient(135deg, rgba(78, 205, 196, 0.15), rgba(78, 205, 196, 0.05));
        }
        
        .device-card.theme-purple {
            background: linear-gradient(135deg, rgba(85, 99, 222, 0.15), rgba(85, 99, 222, 0.05));
        }
        
        .device-card.theme-pink {
            background: linear-gradient(135deg, rgba(255, 107, 107, 0.15), rgba(255, 107, 107, 0.05));
        }
        
        .device-card.theme-green {
            background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.05));
        }
        
        .device-card.theme-orange {
            background: linear-gradient(135deg, rgba(255, 152, 0, 0.15), rgba(255, 152, 0, 0.05));
        }
        
        .device-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
        }
        
        .device-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--card-hover);
        }
        
        /* 电池容器样式 */
        .battery-container {
            position: relative;
            width: 140px;
            height: 220px;
            margin-bottom: 25px;
        }
        
        /* 电池外壳 */
        .battery-case {
            position: absolute;
            width: 120px;
            height: 200px;
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-radius: 18px;
            bottom: 0;
            left: 10px;
            overflow: hidden;
        }
        
        /* 电池顶部 */
        .battery-top {
            position: absolute;
            top: -12px;
            left: 35px;
            width: 50px;
            height: 12px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 6px 6px 0 0;
        }
        
        /* 电量填充 */
        .battery-fill {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(to top, var(--primary-color), var(--secondary-color));
            transition: height 1s ease;
        }
        
        /* 低电量样式 */
        .battery-fill.low {
            background: linear-gradient(to top, var(--accent-color), #ff8a8a);
        }
        
        /* 充电动画 - 波浪效果 */
        .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 120 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 10 C30 15, 50 5, 80 10 S130 15, 160 10" stroke="rgba(255,255,255,0.3)" fill="none" stroke-width="2"/></svg>') repeat-x;
            opacity: 0.8;
            animation: wave 3s linear infinite;
            transform: translateY(20px);
        }
        
        @keyframes wave {
            0% { transform: translateX(0) translateY(10px); }
            50% { transform: translateX(-50%) translateY(0); }
            100% { transform: translateX(-100%) translateY(10px); }
        }
        
        /* 闪电动画 */
        .lightning {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 45px;
            color: rgba(255, 255, 255, 0.5);
            animation: lightning 1.5s infinite;
            opacity: 0;
        }
        
        @keyframes lightning {
            0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
            50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
        }
        
        .battery-level {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2.2rem;
            font-weight: 800;
            z-index: 10;
            color: var(--text-light);
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
        }
        
        .battery-level.low-battery {
            color: var(--accent-color);
        }
        
        .device-name {
            font-size: 1.3rem;
            margin-bottom: 15px;
            font-weight: 700;
            color: var(--text-light);
        }
        
        .device-status {
            font-size: 1.1rem;
            padding: 10px 25px;
            border-radius: 25px;
            background: rgba(255, 255, 255, 0.15);
            font-weight: 500;
        }
        
        /* === 暂无设备提示 === */
        .no-devices {
            grid-column: 1 / -1;
            text-align: center;
            padding: 60px 0;
            background: rgba(255, 255, 255, 0.07);
            backdrop-filter: blur(12px);
            border-radius: 20px;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .no-devices i {
            font-size: 4rem;
            margin-bottom: 25px;
            color: rgba(255, 255, 255, 0.2);
            transition: all 0.5s ease;
        }
        
        .no-devices:hover i {
            color: var(--primary-color);
        }
        
        .no-devices p {
            font-size: 1.4rem;
            color: var(--text-medium);
        }
        
        .no-devices .hint {
            margin-top: 15px;
            font-size: 1rem;
            color: var(--text-medium);
        }
        
        /* === 二维码弹窗 === */
        .qr-code-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(10px);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            padding: 20px;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .modal-content {
            background: linear-gradient(135deg, #1e293b, #0f172a);
            padding: 40px 35px;
            border-radius: 25px;
            text-align: center;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
            max-width: 480px;
            width: 100%;
            transform: scale(0.95);
            animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        @keyframes scaleIn {
            to { transform: scale(1); }
        }
        
        .modal-content::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                transparent,
                rgba(78, 205, 196, 0.2),
                transparent
            );
            animation: rotate 6s linear infinite;
            z-index: -1;
        }
        
        .modal-title {
            font-size: 1.9rem;
            margin-bottom: 25px;
            color: var(--text-light);
            font-weight: 700;
        }
        
        .qr-code {
            width: 280px;
            height: 280px;
            margin: 0 auto 30px;
            background-color: white;
            padding: 15px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            transition: var(--transition);
        }
        
        .qr-code:hover {
            transform: scale(1.03);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
        }
        
        .qr-code img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        .modal-instruction {
            font-size: 1.2rem;
            color: var(--text-medium);
            margin-bottom: 30px;
            line-height: 1.7;
        }
        
        .close-modal {
            display: inline-block;
            padding: 14px 35px;
            background: linear-gradient(45deg, var(--accent-color), var(--primary-color));
            color: white;
            border-radius: 30px;
            cursor: pointer;
            transition: var(--transition);
            font-size: 1.1rem;
            font-weight: 600;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            border: none;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .close-modal::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -60%;
            width: 20%;
            height: 200%;
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(25deg);
            transition: all 0.7s;
            z-index: -1;
        }
        
        .close-modal:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
        }
        
        .close-modal:hover::after {
            left: 120%;
        }
        
        /* === 用户菜单侧边栏 === */
        .user-menu {
            position: fixed;
            top: 0;
            right: -350px;
            width: 320px;
            height: 100vh;
            background: rgba(30, 41, 59, 0.95);
            backdrop-filter: blur(15px);
            box-shadow: -5px 0 30px rgba(0, 0, 0, 0.4);
            z-index: 2000;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            padding: 30px 25px;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            flex-direction: column;
        }
        
        .user-menu.active {
            right: 0;
        }
        
        .menu-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 25px;
            margin-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .menu-header .user-avatar {
            width: 80px;
            height: 80px;
            margin-bottom: 15px;
            border: 3px solid #4ecdc4;
        }
        
        .menu-header .user-id {
            font-size: 1.3rem;
            font-weight: 600;
        }
        
        .menu-items {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .menu-item {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            border-radius: 15px;
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-medium);
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            gap: 15px;
        }
        
        .menu-item:hover {
            background: rgba(78, 205, 196, 0.2);
            color: var(--text-light);
            transform: translateX(5px);
        }
        
        .menu-item i {
            font-size: 1.2rem;
            width: 25px;
            text-align: center;
        }
        
        /* === 修改密码弹窗 === */
        .password-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(10px);
            z-index: 2000;
            justify-content: center;
            align-items: center;
            padding: 20px;
            animation: fadeIn 0.3s ease;
        }
        
        .password-modal .modal-content {
            background: rgba(30, 41, 59, 0.95);
            padding: 35px 30px;
            border-radius: 25px;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
            max-width: 450px;
            width: 100%;
            transform: scale(0.95);
            animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .password-modal .modal-title {
            text-align: center;
            margin-bottom: 30px;
            color: var(--text-light);
            font-size: 1.8rem;
        }
        
        .password-modal .input-group {
            position: relative;
            margin-bottom: 20px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 15px;
            padding: 0 20px;
            display: flex;
            align-items: center;
            transition: all 0.3s;
            height: 55px;
        }
        
        .password-modal .input-group i {
            color: #4ecdc4;
            font-size: 1.1rem;
            margin-right: 15px;
        }
        
        .password-modal .input-group input {
            flex: 1;
            height: 100%;
            border: none;
            outline: none;
            background: transparent;
            font-size: 1rem;
            color: var(--text-light);
        }
        
        .password-modal .submit-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(45deg, var(--accent-color), var(--primary-color));
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            margin-top: 15px;
        }
        
        .password-modal .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        }
        
        /* 错误状态样式 */
        .password-modal .input-group.error {
            border: 1px solid var(--accent-color);
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2);
        }

        .password-modal .input-group.error i {
            color: var(--accent-color);
        }

        /* 退出登录动画 */
        .logout-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.95);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 3000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }
        
        .logout-overlay.active {
            opacity: 1;
            pointer-events: all;
        }
        
        .logout-content {
            text-align: center;
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.5s ease;
        }
        
        .logout-overlay.active .logout-content {
            transform: translateY(0);
            opacity: 1;
        }
        
        .logout-icon {
            font-size: 4rem;
            color: #4ecdc4;
            margin-bottom: 20px;
            animation: pulse 1.5s infinite;
        }
        
        .logout-text {
            font-size: 1.8rem;
            color: var(--text-light);
            font-weight: 600;
        }
        
        /* === 强制登录弹窗 === */
        .force-login-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(15px);
            z-index: 4000;
            justify-content: center;
            align-items: center;
            padding: 20px;
            animation: fadeIn 0.5s ease;
        }
        
        .force-login-modal .modal-content {
            background: linear-gradient(135deg, #1e293b, #0f172a);
            padding: 50px 40px;
            border-radius: 25px;
            text-align: center;
            box-shadow: 0 40px 70px rgba(0, 0, 0, 0.7);
            max-width: 500px;
            width: 100%;
            border: 2px solid rgba(255, 107, 107, 0.3);
            position: relative;
            overflow: hidden;
        }
        
        .force-login-modal .modal-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, #ff6b6b, #ff8a8a);
            animation: pulse-glow 2s infinite;
        }
        
        @keyframes pulse-glow {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }
        
        .force-login-modal .modal-title {
            font-size: 2.2rem;
            margin-bottom: 25px;
            color: #ff6b6b;
            font-weight: 700;
            text-shadow: 0 0 15px rgba(255, 107, 107, 0.4);
        }
        
        .force-login-modal .modal-instruction {
            font-size: 1.4rem;
            color: var(--text-light);
            margin-bottom: 35px;
            line-height: 1.7;
        }
        
        .force-login-modal .login-btn {
            display: inline-block;
            padding: 16px 45px;
            background: linear-gradient(45deg, #ff6b6b, #ff8a8a);
            color: white;
            border-radius: 30px;
            cursor: pointer;
            transition: var(--transition);
            font-size: 1.3rem;
            font-weight: 600;
            box-shadow: 0 10px 25px rgba(255, 107, 107, 0.4);
            border: none;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .force-login-modal .login-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(255, 107, 107, 0.6);
        }
        
        /* === 页脚 === */
        .footer {
            text-align: center;
            padding: 20px;
            color: var(--text-medium);
            font-size: 0.9rem;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        /* === Toast 通知 === */
        .toast {
            position: fixed;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            padding: 16px 35px;
            border-radius: 30px;
            color: white;
            font-size: 1.1rem;
            z-index: 3000;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
            opacity: 0;
            animation: toastFadeIn 0.3s ease forwards;
            max-width: 90%;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.15);
        }
        
        @keyframes toastFadeIn {
            from { opacity: 0; transform: translate(-50%, 20px); }
            to { opacity: 1; transform: translate(-50%, 0); }
        }
        
        .toast-success { 
            background: rgba(78, 205, 196, 0.25);
        }
        
        .toast-error { 
            background: rgba(255, 107, 107, 0.25);
        }
        
        /* === 加载动画 === */
        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }
        
        /* === 响应式设计 === */
        @media (max-width: 992px) {
            .charging-devices {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            }
        }
        
        @media (max-width: 768px) {
            .welcome-section {
                flex-direction: column;
                align-items: flex-start;
                gap: 25px;
            }
            
            .battery-container {
                width: 120px;
                height: 190px;
            }
            
            .battery-case {
                width: 100px;
                height: 170px;
            }
            
            .modal-content {
                padding: 30px 25px;
            }
            
            .qr-code {
                width: 240px;
                height: 240px;
            }
            
            .force-login-modal .modal-content {
                padding: 30px 25px;
            }
            
            .force-login-modal .modal-title {
                font-size: 1.8rem;
            }
        }
        
        @media (max-width: 576px) {
            .container {
                padding: 20px 15px;
            }
            
            .header {
                flex-direction: column;
                align-items: flex-start;
                padding: 20px;
                gap: 20px;
            }
            
            .charging-devices {
                grid-template-columns: 1fr;
            }
            
            .balance {
                font-size: 1.6rem;
            }
            
            .recharge-btn {
                padding: 12px 24px;
                font-size: 1rem;
            }
            
            .battery-container {
                width: 100px;
                height: 160px;
            }
            
            .battery-case {
                width: 80px;
                height: 140px;
            }
            
            .battery-top {
                left: 25px;
            }
            
            .battery-level {
                font-size: 1.8rem;
            }
            
            .force-login-modal .modal-title {
                font-size: 1.6rem;
            }
            
            .force-login-modal .modal-instruction {
                font-size: 1.1rem;
            }
            
            .force-login-modal .login-btn {
                padding: 14px 35px;
                font-size: 1.1rem;
            }
        }
    </style>
</head>
<body>
    <!-- 强制登录提示弹窗 -->
    <div class="force-login-modal" id="forceLoginModal">
        <div class="modal-content">
            <h3 class="modal-title">请先登录</h3>
            <p class="modal-instruction">您需要登录才能访问充电控制面板<br>或您的登录信息已过期</p>
            <button class="login-btn" id="loginRedirectBtn">
                <i class="fas fa-sign-in-alt"></i> 前往登录
            </button>
        </div>
    </div>
    
    <div class="container">
        <!-- 头部 -->
        <header class="header">
            <div class="panel-title">
                <i class="fas fa-bolt"></i>
                充电控制面板
            </div>
            <div class="user-info">
                <div class="user-avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="user-id" id="userIdDisplay">加载中...</div>
            </div>
        </header>
        
        <!-- 欢迎区域 -->
        <div class="welcome-section">
            <div class="welcome-text">
                欢迎回来，<span id="welcomeText">加载中...</span>
            </div>
            <div class="balance-section">
                <div class="balance">
                    <i class="fas fa-wallet"></i>
                    <span id="balanceDisplay">¥ 0.00</span>
                </div>
                <button class="recharge-btn" id="rechargeBtn">
                    <i class="fas fa-plus-circle"></i> 充值
                </button>
            </div>
        </div>
        
        <!-- 设备统计区域 -->
        <div class="device-stats">
            <span class="stats-label">当前充电设备：</span>
            <span class="active-devices" id="activeDevices">
                <i class="fas fa-plug"></i>
                <span>0 台</span>
            </span>
            <button class="refresh-btn" id="refreshBtn">
                <i class="fas fa-sync"></i>
            </button>
        </div>
        
        <!-- 充电设备区域 -->
        <div class="charging-devices" id="chargingDevices">
            <div class="no-devices" style="display: none;">
                <i class="fas fa-plug"></i>
                <p>暂无充电设备</p>
                <p class="hint">请连接您的设备开始充电</p>
            </div>
        </div>
    </div>
    
    <!-- 二维码弹窗 -->
    <div class="qr-code-modal" id="qrModal">
        <div class="modal-content">
            <h3 class="modal-title">扫码充值</h3>
            <div class="qr-code">
                <img src="http://49.235.120.243:8083/image/fee.jpg" alt="充值二维码">
            </div>
            <p class="modal-instruction">请使用微信或支付宝扫描二维码进行充值<br>充值金额将实时更新到您的账户</p>
            <button class="close-modal" id="closeModal">
                <i class="fas fa-times"></i> 关闭
            </button>
        </div>
    </div>
    
    <!-- 用户菜单侧边栏 -->
    <div class="user-menu" id="userMenu">
        <div class="menu-header">
            <div class="user-avatar">
                <i class="fas fa-user"></i>
            </div>
            <div class="user-id" id="menuUserId">加载中...</div>
        </div>
        
        <div class="menu-items">
            <div class="menu-item" id="changePasswordBtn">
                <i class="fas fa-key"></i>
                <span>修改密码</span>
            </div>
            <div class="menu-item" id="logoutBtn">
                <i class="fas fa-sign-out-alt"></i>
                <span>退出登录</span>
            </div>
        </div>
    </div>
    
    <!-- 修改密码弹窗 -->
    <div class="password-modal" id="passwordModal">
        <div class="modal-content">
            <h3 class="modal-title">修改密码</h3>
            
            <form id="passwordForm">
                <div class="input-group">
                    <i class="fas fa-user"></i>
                    <input type="text" id="resetUsername" placeholder="请输入账号" readonly>
                </div>
                
                <div class="input-group">
                    <i class="fas fa-lock"></i>
                    <input type="password" id="resetPassword" placeholder="请输入新密码,6-20位数字字母组合" required>
                </div>
                
                <div class="input-group">
                    <i class="fas fa-lock"></i>
                    <input type="password" id="resetConfirmPassword" placeholder="请确认新密码" required>
                </div>
                
                <button type="submit" class="submit-btn">确认修改</button>
            </form>
        </div>
    </div>
    
    <!-- 退出登录覆盖层 -->
    <div class="logout-overlay" id="logoutOverlay">
        <div class="logout-content">
            <div class="logout-icon">
                <i class="fas fa-sign-out-alt"></i>
            </div>
            <div class="logout-text">退出中...</div>
        </div>
    </div>

    <script>
        // Toast 通知函数
        const createToast = (message, type = 'success') => {
            const toast = document.createElement('div');
            toast.className = `toast toast-${type}`;
            
            const icon = type === 'success' 
                ? '<i class="fas fa-check-circle"></i>' 
                : '<i class="fas fa-exclamation-circle"></i>';
            
            toast.innerHTML = `${icon} ${message}`;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => {
                    document.body.removeChild(toast);
                }, 300);
            }, 3000);
        };
        
        document.addEventListener('DOMContentLoaded', function() {
            // 显示强制登录弹窗
            const forceLoginModal = document.getElementById('forceLoginModal');
            const loginRedirectBtn = document.getElementById('loginRedirectBtn');
            
            // 检查用户信息是否有效
            function checkUserInfo() {
                const userInfoStr = localStorage.getItem('userInfo');
                console.log('Stored userInfo:', userInfoStr);
                if (!userInfoStr) {
                    console.log('No userInfo found');
                    forceLoginModal.style.display = 'flex';
                    return null;
                }
                
                try {
                    const userInfo = JSON.parse(userInfoStr);
                    console.log('Parsed userInfo:', userInfo);
                    // 检查是否设置了有效期
                    if (!userInfo.expires) {
                        console.log('No expires field in userInfo');
                        forceLoginModal.style.display = 'flex';
                        return null;
                    }
                    
                    // 检查是否过期（1天有效期）
                    const now = Date.now();
                    console.log('Current time:', now, 'Expires time:', userInfo.expires);
                    if (now > userInfo.expires) {
                        console.log('UserInfo expired');
                        localStorage.removeItem('userInfo');
                        forceLoginModal.style.display = 'flex';
                        return null;
                    }
                    console.log('UserInfo is valid');
                    return userInfo;
                } catch (e) {
                    console.log('Error parsing userInfo:', e);
                    forceLoginModal.style.display = 'flex';
                    return null;
                }
            }
            
            // 前往登录页面
            loginRedirectBtn.addEventListener('click', function() {
                window.location.href = 'index.html';
            });
            
            // 获取用户信息
            const user = checkUserInfo();
            if (!user) {
                return;
            }
            
            const userId = user.id;
            
            // 显示用户ID
            document.getElementById('userIdDisplay').textContent = userId;
            document.getElementById('welcomeText').textContent = userId;
            document.getElementById('menuUserId').textContent = userId;
            document.getElementById('resetUsername').value = userId;
            
            // 初始化页面元素
            const balanceDisplay = document.getElementById('balanceDisplay');
            const activeDevices = document.getElementById('activeDevices');
            const chargingDevices = document.getElementById('chargingDevices');
            const noDevices = chargingDevices.querySelector('.no-devices');
            const rechargeBtn = document.getElementById('rechargeBtn');
            const qrModal = document.getElementById('qrModal');
            const closeModal = document.getElementById('closeModal');
            const refreshBtn = document.getElementById('refreshBtn');
            const userAvatar = document.querySelector('.header .user-avatar');
            const userMenu = document.getElementById('userMenu');
            const logoutBtn = document.getElementById('logoutBtn');
            const changePasswordBtn = document.getElementById('changePasswordBtn');
            const passwordModal = document.getElementById('passwordModal');
            const passwordForm = document.getElementById('passwordForm');
            const logoutOverlay = document.getElementById('logoutOverlay');
            
            // 加载用户数据
            loadUserInfo(userId);
            
            // 充值按钮点击事件
            rechargeBtn.addEventListener('click', function() {
                qrModal.style.display = 'flex';
            });
            
            // 关闭弹窗事件
            closeModal.addEventListener('click', function() {
                qrModal.style.display = 'none';
            });
            
            // 点击弹窗外部关闭弹窗
            qrModal.addEventListener('click', function(e) {
                if (e.target === qrModal) {
                    qrModal.style.display = 'none';
                }
            });
            
            // 刷新按钮点击事件
            refreshBtn.addEventListener('click', function() {
                // 添加旋转动画
                refreshBtn.style.transform = 'rotate(360deg)';
                setTimeout(() => {
                    refreshBtn.style.transform = '';
                }, 500);
                
                // 重新加载数据
                loadUserInfo(userId);
                createToast('数据已刷新', 'success');
            });
            
            // 点击头像打开用户菜单
            userAvatar.addEventListener('click', function(e) {
                e.stopPropagation();
                userMenu.classList.add('active');
                
                // 点击其他地方关闭菜单
                document.addEventListener('click', closeMenu);
            });
            
            // 关闭菜单函数
            function closeMenu(e) {
                if (!userMenu.contains(e.target)) {
                    userMenu.classList.remove('active');
                    document.removeEventListener('click', closeMenu);
                }
            }
            
            // 退出登录功能
            logoutBtn.addEventListener('click', function() {
                logoutOverlay.classList.add('active');
                
                // 延迟跳转
                setTimeout(() => {
                    localStorage.removeItem('userInfo');
                    window.location.href = 'index.html';
                }, 800);
            });
            
            // 打开修改密码弹窗
            changePasswordBtn.addEventListener('click', function() {
                passwordModal.style.display = 'flex';
                userMenu.classList.remove('active');
            });
            
            // 关闭密码修改弹窗
            passwordModal.addEventListener('click', function(e) {
                if (e.target === passwordModal) {
                    passwordModal.style.display = 'none';
                }
            });
            
            // 处理密码修改表单
            passwordForm.addEventListener('submit', function(e) {
                e.preventDefault();

                const username = document.getElementById('resetUsername').value;
                const password = document.getElementById('resetPassword').value;
                const confirmPassword = document.getElementById('resetConfirmPassword').value;
                
                // 清除之前的错误状态
                const passwordInput = document.getElementById('resetPassword');
                const confirmInput = document.getElementById('resetConfirmPassword');
                const passwordGroup = passwordInput.closest('.input-group');
                const confirmGroup = confirmInput.closest('.input-group');
                
                passwordGroup.classList.remove('error');
                confirmGroup.classList.remove('error');
                
                // 验证密码格式（6-20位，包含字母和数字）
                const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,20}$/;
                if (!passwordRegex.test(password)) {
                    passwordGroup.classList.add('error');
                    createToast('密码长度需在6-20位之间，包含字母和数字', 'error');
                    return;
                }
                
                // 验证两次密码是否一致
                if (password !== confirmPassword) {
                    confirmGroup.classList.add('error');
                    createToast('两次输入的密码不一致', 'error');
                    return;
                }
                
                // 显示加载状态
                const submitBtn = this.querySelector('button');
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 处理中...';
                submitBtn.disabled = true;
                
                // 发送请求到服务器
                fetch('http://49.235.120.243:8083/api/reset_password', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        username: username,
                        password: password
                    })
                })
                .then(response => response.json())
                .then(data => {
                    // 重置按钮状态
                    submitBtn.innerHTML = '确认修改';
                    submitBtn.disabled = false;
                    
                    if (data.success) {
                        createToast(data.message || '密码修改成功', 'success');
                        // 1秒后关闭弹窗
                        setTimeout(() => {
                            passwordModal.style.display = 'none';
                        }, 1000);
                    } else {
                        createToast(data.message || '密码修改失败', 'error');
                    }
                })
                .catch(error => {
                    // 显示网络错误 Toast
                    createToast('请求失败，请检查网络连接', 'error');
                    submitBtn.innerHTML = '确认修改';
                    submitBtn.disabled = false;
                });
            });
            
            // 加载用户信息和设备数据
            function loadUserInfo(userId) {
                // 显示加载状态
                createToast('正在加载数据...', 'success');
                
                fetch(`http://49.235.120.243:8083/api/user_info?id=${userId}`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP错误: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('用户数据响应:', data);
                    
                    if (data.success) {
                        // 更新余额
                        balanceDisplay.textContent = `¥ ${data.data.money.toFixed(2)}`;
                        
                        // 处理充电设备数据
                        const devices = data.data.devices || [];
                        
                        // 更新活跃设备数量
                        activeDevices.querySelector('span').textContent = `${devices.length} 台`;
                        
                        // 清空设备容器
                        chargingDevices.innerHTML = '';
                        
                        if (devices.length === 0) {
                            // 显示暂无设备提示
                            chargingDevices.appendChild(noDevices);
                            noDevices.style.display = 'block';
                        } else {
                            // 隐藏暂无设备提示
                            noDevices.style.display = 'none';
                            
                            // 添加设备卡片
                            devices.forEach((device, index) => {
                                const deviceCard = createDeviceCard(device, index);
                                chargingDevices.appendChild(deviceCard);
                                
                                // 设置电量高度
                                setTimeout(() => {
                                    const fill = deviceCard.querySelector('.battery-fill');
                                    fill.style.height = `${device.realBattery}%`;
                                    
                                    // 低电量特殊处理
                                    if (device.realBattery <= 20) {
                                        fill.classList.add('low');
                                    }
                                    
                                    // 控制充电动画显示/隐藏
                                    const wave = deviceCard.querySelector('.wave');
                                    const lightning = deviceCard.querySelector('.lightning');
                                    
                                    if (device.realBattery === 100 || device.battery >= 1000) {
                                        wave.style.display = 'none';
                                        lightning.style.display = 'none';
                                    } else {
                                        wave.style.display = 'block';
                                        lightning.style.display = 'block';
                                    }
                                }, 100);
                            });
                        }
                        
                        createToast('数据加载成功', 'success');
                    } else {
                        createToast(data.message || '获取用户数据失败', 'error');
                    }
                })
                .catch(error => {
                    console.error('获取用户数据失败:', error);
                    createToast('获取用户数据失败，请稍后再试', 'error');
                });
            }
            
            // 创建设备卡片
            function createDeviceCard(device, index) {
                const card = document.createElement('div');
                
                // 计算真实电量
                let realBattery = device.battery;
                let status = '充电中';
                let statusClass = '充电中';
                
                // 处理新的电量逻辑
                
                
                // 根据索引应用不同主题
                const themes = ['theme-blue', 'theme-purple', 'theme-pink', 'theme-green', 'theme-orange'];
                const themeClass = themes[index % themes.length];
                card.className = `device-card ${themeClass}`;
                
                // 根据电量设置设备状态和样式
                let batteryClass = '';
                if (realBattery <= 20) {
                    batteryClass = ' low-battery'; // 添加低电量类
                } else if (realBattery === 100) {
                    status = '已充满';
                    statusClass = '已充满';
                } else if (device.battery >= 1000) {
                    realBattery = device.battery - 1000;
                    status = '已停止充电';
                    statusClass = '已停止充电';
                }
                
                // 将真实电量添加到设备对象中，便于后续使用
                device.realBattery = realBattery;
                
                card.innerHTML = `
                    <div class="battery-container">
                        <div class="battery-top"></div>
                        <div class="battery-case">
                            <div class="battery-fill">
                                <div class="wave"></div>
                            </div>
                        </div>
                        <div class="lightning"><i class="fas fa-bolt"></i></div>
                        <div class="battery-level${batteryClass}">${realBattery}%</div>
                    </div>
                    <div class="device-name">设备 ${device.deviceId}</div>
                    <div class="device-status ${statusClass}">${status}</div>
                `;
                
                return card;
            }
        });
    </script>
</body>
</html>